<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>签到</title>
	<link rel="stylesheet" href="css/qiandao_style.css">
</head>
<body>
<div class="qiandao-warp">
	<div class="qiandap-box">
		<div class="qiandao-banner">
			<img src="images/qiandao_banner.jpg" height="551" width="1120" alt="">
		</div>
		<div class="qiandao-con clear">
			<div class="qiandao-left">
				<div class="qiandao-left-top clear">
					<div class="current-date">2016年1月6日</div>
					<div class="qiandao-history qiandao-tran qiandao-radius" id="js-qiandao-history">我的签到</div>
				</div>
				<div class="qiandao-main" id="js-qiandao-main">
					<ul class="qiandao-list" id="js-qiandao-list">
					</ul>
				</div>
			</div>
			<div class="qiandao-right">
				<div class="qiandao-top">
					<div class="just-qiandao qiandao-sprits" id="js-just-qiandao">
					</div>
					<p class="qiandao-notic">今日已领<span>1</span>积分，请明日继续签到</p>
				</div>
				<div class="qiandao-bottom">
					<div class="qiandao-rule-list">
						<h4>签到规则</h4>
						<p>首次签到获得1积分奖励</p>
						<p>连续签到每天增加1积分奖励</p>
						<p>连续签到7天及以上每天获得7积分奖励</p>
					</div>
					<div class="qiandao-rule-list">
						<h4>其他说明</h4>
						<p>如果中间有一天间断未签到的，重先开始计算连续签到时间。</p>
						<p>连续签到获得奖励后分享到QQ空间、微信朋友圈后再获得一次奖励，每天只限分享一次。</p>
						<p>获得的奖励不能直接提现，只能用于消费扣减或抽奖使用。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="qiandao-layer qiandao-history-layer">
	<div class="qiandao-layer-con qiandao-radius">
		<a href="javascript:;" class="close-qiandao-layer qiandao-sprits"></a>
		<ul class="qiandao-history-inf clear">
			<li>
				<p>连续签到</p>
				<h4>5</h4>
			</li>
			<li>
				<p>本月签到</p>
				<h4>17</h4>
			</li>
			<li>
				<p>总共签到数</p>
				<h4>28</h4>
			</li>
			<li>
				<p>签到累计奖励</p>
				<h4>30</h4>
			</li>
		</ul>
		<div class="qiandao-history-table">
			<table>
				<thead>
				<tr>
					<th>签到日期</th>
					<th>奖励</th>
					<th>说明</th>
				</tr>
				</thead>
				<table>
					<tr>
						<td>2016-1-6 14:23:45</td>
						<td>0.20</td>
						<td>连续签到19天奖励</td>
					</tr>
					<tr>
						<td>2016-1-6 14:23:45</td>
						<td>0.20</td>
						<td>分享奖励</td>
					</tr>
					<tr>
						<td>2016-1-6 14:23:45</td>
						<td>0.20</td>
						<td>连续签到19天奖励</td>
					</tr>
					<tr>
						<td>2016-1-6 14:23:45</td>
						<td>0.20</td>
						<td>连续签到19天奖励</td>
					</tr>
					<tr>
						<td>2016-1-6 14:23:45</td>
						<td>0.20</td>
						<td>连续签到19天奖励</td>
					</tr>
					<tr>
						<td>2016-1-6 14:23:45</td>
						<td>0.20</td>
						<td>连续签到19天奖励</td>
					</tr>
					<tr>
						<td>2016-1-6 14:23:45</td>
						<td>0.20</td>
						<td>连续签到19天奖励</td>
					</tr>
					<tr>
						<td>2016-1-6 14:23:45</td>
						<td>0.20</td>
						<td>连续签到19天奖励</td>
					</tr>
				</table>
			</table>
		</div>
	</div>
	<div class="qiandao-layer-bg"></div>
</div>


<div class="qiandao-layer qiandao-active">
	<div class="qiandao-layer-con qiandao-radius">
		<a href="javascript:;" class="close-qiandao-layer qiandao-sprits"></a>
		<div class="yiqiandao clear">
			<div class="yiqiandao-icon qiandao-sprits"></div>您已连续签到<span>2</span>天
		</div>
		<div class="qiandao-jiangli qiandao-sprits">
			<span class="qiandao-jiangli-num">0.55<em>元</em></span>
		</div>
		<a href="#" class="qiandao-share qiandao-tran">分享获取双倍收益</a>
	</div>
	<div class="qiandao-layer-bg"></div>
</div>

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/qiandao_js.js"></script>
</body>
</html>


<script charset="gb2312" type="text/javascript" language="JavaScript">

	$(function () {
		var signFun = function () {
			var dateArray = [1, 2, 4, 6]
			var $dateBox = $("#js-qiandao-list"), $currentDate = $(".current-date"), $qiandaoBnt = $("#js-just-qiandao"),
				_html = '', _handle = true, myDate = new Date();
			$currentDate.text(myDate.getFullYear() + '年' + parseInt(myDate.getMonth() + 1) + '月' + myDate.getDate() + '日');
			var monthFirst = new Date(myDate.getFullYear(), parseInt(myDate.getMonth()), 1).getDay();
			var d = new Date(myDate.getFullYear(), parseInt(myDate.getMonth() + 1), 0);
			var totalDay = d.getDate();
			for (var i = 0; i < 42; i++) {
				_html += ' <li><div class="qiandao-icon"></div></li>'
			}
			$dateBox.html(_html)
			var $dateLi = $dateBox.find("li");
			for (var i = 0; i < totalDay; i++) {
				$dateLi.eq(i + monthFirst).addClass("date" + parseInt(i + 1));
				for (var j = 0; j < dateArray.length; j++) {
					if (i == dateArray[j]) {
						$dateLi.eq(i + monthFirst).addClass("qiandao");
					}
				}
			}
			$(".date" + myDate.getDate()).addClass('able-qiandao');
			$dateBox.on("click", "li", function () {
				if ($(this).hasClass('able-qiandao') && _handle) {
					$(this).addClass('qiandao');
					qiandaoFun();
				}
			})
			$qiandaoBnt.on("click", function () {
				if (_handle) {
					qiandaoFun();
				}
			});

			function qiandaoFun() {
				$qiandaoBnt.addClass('actived');
				openLayer("qiandao-active", qianDao);
				_handle = false;
			}

			function qianDao() {
				$(".date" + myDate.getDate()).addClass('qiandao');
			}
		}();

		function openLayer(a, Fun) {
			$('.' + a).fadeIn(Fun)
		}

		var closeLayer = function () {
			$("body").on("click", ".close-qiandao-layer", function () {
				$(this).parents(".qiandao-layer").fadeOut()
			})
		}()
		$("#js-qiandao-history").on("click", function () {
			openLayer("qiandao-history-layer", myFun);

			function myFun() {
				console.log(1)
			}
		})
	})
</script>
